/* 编辑页面js 也是最核心部分 包含新建，编辑、填写功能 在通过管理页面存储的不同id（write-id、edit-id）展示不同 */
/* 通过获取不同id的key 判断用户选择功能 根据value获取存储在浏览器本地的问卷 对数据展示 修改后再存储*/
/* 获取到edit-id显示编辑页面 获取到write-id显示填写页面 否则显示新建页面 */

// 保存按钮
const saveBtn = document.getElementsByClassName("save")[0]
// 发布按钮
const publicBtn = document.getElementsByClassName("public")[0]
// 获取标题框
const titleText = document.getElementsByClassName("title")[0]
// 获得添加问题部分
const addBox = document.getElementsByClassName("add-box")[0]
// 获得问题选项部分
const choseBox = document.getElementsByClassName("chose-box")[0]
// 弹出的窗口
const cover = document.querySelector(".cover");
// 关闭弹出窗口
const close = document.querySelector("#close");
// 确定按钮
const yes = document.querySelector("#yes");
// 取消按钮
const no = document.querySelector("#no");
// 操作部分
const opers = document.getElementsByClassName("oper")
// 是否必填部分
const musts = document.getElementsByClassName("must-box")
// 填加问题以及问题选项部分
const wrapper = document.getElementsByClassName("wrapper")
// 问题提交按钮
const submit = document.getElementsByClassName("submit")
// 获取日期框
const dateBox = document.getElementById("date")

// 日历框默认问当前日期
dateBox.value=getNowFormatDay()



addBox.onclick = function(){
    choseBox.style.display="block";
}

/* 添加题目内容 */
/* 单选题按钮 */
const single = document.getElementById("single")
/* 多选题按钮 */
const mutiple = document.getElementById("mutiple")
/* 文本题按钮 */
const text = document.getElementById("text")
/* 题目内容·区域 */
const content = document.getElementsByClassName("content")[0]
// 题目个数
var count = 0
// 题目索引
var subjectIndex = 0
// 题目索引
var subjectId = 0
// 存储题目
var subject=[]
var innerSubject = ''
/* 添加单选题 */
// single.onclick = singlefun()
function singlefun(){
    if(count===10){
        alert("问题数量超过限制")
        return
    }
    count++
    subjectIndex++
    subject [subject.length] = 
    '<div class="contents">'+
        '<div class="titles">'+
            'Q<p class="id">'+(subjectIndex)+'</p><p class="subjectType">单选题</p>&nbsp;&nbsp;&nbsp;<input type="text" class="subjectTitle" value="单选题目">'+
        '</div>'+
        '<div class="choses">'+
            '<div class="checkbox01">'+
                '<input type="radio" name="demo-radio" class="demoHidden">&nbsp;&nbsp;'+
                '<span class="radioInput"></span><input type="text" class="subjectChose" value="选项1">'+
            '</div>'+
            '<div class="checkbox01">'+
                '<input type="radio" name="demo-radio" class="demoHidden">&nbsp;&nbsp;'+
                '<span class="radioInput"></span><input type="text" class="subjectChose" value="选项2">'+
            '</div>'+
        '</div>'+
        '<div class="oper">'+
            '<a href="javascript:;" class="up" onclick="doUp(event)">上移</a>'+
            '<a href="javascript:;" class="down" onclick="doDown(event)">下移</a>'+
            '<a href="javascript:;" class="double" onclick="doDouble(event)">复用</a>'+
            '<a href="javascript:;" class="delete" onclick="doDelete(event)">删除</a>'+
        '</div>'+
    '</div>'
    play()
    
}

/* 添加多选题 */
function mutiplefun(){
    if(count===10){
        cover.style.display = "none";
        alert("问题数量超过限制")
        return
    }
    count++
    subjectIndex++
    subject [subject.length] = 
    '<div class="contents">'+
       '<div class="titles">'+
       'Q<p class="id">'+(subjectIndex)+'</p><p class="subjectType">多选题</p>&nbsp;&nbsp;&nbsp;<input type="text" class="subjectTitle" value="多选题目">'+
        '</div>'+
        '<div class="choses">'+
            '<div class="checkbox01">'+
                '<input type="checkbox" name="demo-checkbox" class="democheckbox">&nbsp;&nbsp;'+
                '<span class="radioInput"></span><input type="text" class="subjectChose" value="选项1">'+
            '</div>'+
            '<div class="checkbox01">'+
                '<input type="checkbox" name="demo-checkbox" class="democheckbox">&nbsp;&nbsp;'+
                '<span class="radioInput"></span><input type="text" class="subjectChose" value="选项2">'+
            '</div>'+
            '<div class="checkbox01">'+
                '<input type="checkbox" name="demo-checkbox" class="democheckbox">&nbsp;&nbsp;'+
                '<span class="radioInput"></span><input type="text" class="subjectChose" value="选项3">'+
            '</div>'+
            '<div class="checkbox01">'+
                '<input type="checkbox" name="demo-checkbox" class="democheckbox">&nbsp;&nbsp;'+
                '<span class="radioInput"></span><input type="text" class="subjectChose" value="选项4">'+
            '</div>'+
        '</div>'+
        '<div class="oper">'+
            '<a href="javascript:;" class="up" onclick="doUp(event)">上移</a>'+
            '<a href="javascript:;" class="down" onclick="doDown(event)">下移</a>'+
            '<a href="javascript:;" class="double" onclick="doDouble(event)">复用</a>'+
            '<a href="javascript:;" class="delete" onclick="doDelete(event)">删除</a>'+
        '</div>'+
    '</div>'
    play()
    
}

/* 添加文本题 */
function textfun(){
    if(count===10){
        alert("问题数量超过限制")
        return
    }
    count++
    subjectIndex++
    subject [subject.length] = 
    '<div class="contents">'+
        '<div class="titles">'+
        'Q<p class="id">'+(subjectIndex)+'</p><p class="subjectType">文本题</p>&nbsp;&nbsp;&nbsp;<input type="text" class="subjectTitle" value="文本题目">'+
            '<div class="must-box">'+
                '<input type="checkbox" class="must" >&nbsp;&nbsp;'+
                '此题是否必填'+
            '</div>'+
        '</div>'+
        '<div class="choses">'+
            '<div class="text-box">'+
                '<input type="text" class="text" value="请输入题目说明">'+
            '</div>'+
        '</div>'+
        '<div class="oper">'+
            '<a href="javascript:;" class="up" onclick="doUp(event)">上移</a>'+
            '<a href="javascript:;" class="down" onclick="doDown(event)">下移</a>'+
            '<a href="javascript:;" class="double" onclick="doDouble(event)">复用</a>'+
            '<a href="javascript:;" class="delete" onclick="doDelete(event)">删除</a>'+
        '</div>'+
    '</div>'
    play()
}
let editId = localStorage.getItem("edit-id")
for(var editArr of Arr){
    if(editArr.id===editId){
        console.log(editArr);
        edit(editArr);
    }
}

function play(){
    innerSubject=''
    for(let i=0; i<subject.length;i++){
        innerSubject +=subject[i]
    }
    content.innerHTML = innerSubject
    // 隐藏第一行上移和最后一行下移
    document.getElementsByClassName("up")[0].style.display="none"
    const downs = document.getElementsByClassName("down");
    downs[downs.length-1].style.display="none"
    for(let i=0;i<document.getElementsByClassName("contents").length;i++){
        document.getElementsByClassName("contents")[i].getElementsByClassName("id")[0].textContent=i+1
    }
    // showData();
    
    
}


// 上移
function doUp(event){
    const obj = event.srcElement.parentNode.parentNode;
    let getId = obj.getElementsByClassName("id")[0].textContent
    console.log(getId);
    let min = parseInt(getId-2)
    let max = parseInt(getId-1)
    console.log(min);
    console.log(max);
    let temp
    temp = subject[min]
    subject[min] = subject[max]
    subject[max] = temp
    play()
}

// 下移
function doDown(event){
    const obj = event.srcElement.parentNode.parentNode;
    let getId = obj.getElementsByClassName("id")[0].textContent
    let min = parseInt(getId-1)
    let max = parseInt(getId)
    let temp = subject[min]
    subject[min] = subject[max]
    subject[max] = temp
    play()
}

// 复用
function doDouble(event){
    if(count===10){
        alert("问题数量超过限制")
        return
    }
    count++
    const obj = event.srcElement.parentNode.parentNode;
    let getId = obj.getElementsByClassName("id")[0].textContent
    let min = parseInt(getId-1)
    let max = parseInt(getId)
    let temp = subject[min]
    subject.splice(min,0,temp)
    play()
}

// 删除
function doDelete(event){
    count--
    const obj = event.srcElement.parentNode.parentNode;
    let getId = obj.getElementsByClassName("id")[0].textContent
    let min = parseInt(getId-1)
    subject.splice(min,1)
    play()
}
const contents = document.getElementsByClassName("contents")
// 保存
var publishTime;
function put(statusText){ 
    if(count===0){
        cover.style.display = "none";
        alert("题目数量不能为0")
        return
    }
    // 如果全部问卷都被删除 id默认为1  
    let id
    if(Arr.length===0){
        id = "1"
    }else{
        // id默认为前一个加1
        id = (parseInt(Arr[Arr.length-1].id)+1).toString()
    }
    // 保存标题 时间 
    let title = titleText.value
    publishTime = dateBox.value
    // 提示修改截止日期
    if(publishTime<getNowFormatDay()){
        alert("问卷截止日期不能小于当前日期")
        return
    }
    

    // 保存问题
    let questions = []
    // 个数
    let questionCount = count;
    for(let i=0;i<questionCount;i++){
        // 顺序
        let order = contents[i].getElementsByClassName("id")[0].textContent
        // 类型
        let type = contents[i].getElementsByClassName("subjectType")[0].textContent
        // 题目
        let questionTitle = contents[i].getElementsByClassName("subjectTitle")[0].value
        // 选项（数量和选项描述）
        let options = []
        let optionCount =  contents[i].getElementsByClassName("checkbox01").length   
        for(let j=0;j<optionCount;j++){
            option = contents[i].getElementsByClassName("subjectChose")[j].value
            options[j] = option;
        }
        let text=''
        let check=''
        if(contents[i].getElementsByClassName("text")[0]){
            text = contents[i].getElementsByClassName("text")[0].value
        }
        if(contents[i].getElementsByClassName("must")[0]){
            check = contents[i].getElementsByClassName("must")[0].checked
        }
        questions[questions.length] =  new question(order,type,questionTitle,optionCount,options,text,check,[0,0,0,0],0)
    }
    
    // 保存到本地
    let changeId=Arr.length
    for(var arrTest of Arr){
        if(localStorage.getItem("edit-id")===arrTest.id){
            changeId = Arr.indexOf(arrTest)
        }
    }
   
    Arr[changeId] = new arr(id,title,publishTime,statusText,questions)
    
    ArrText=JSON.stringify(Arr)
    localStorage.setItem("ArrText",ArrText)
    localStorage.removeItem("edit-id")
    // 跳转页面到管理
    str="../index.html"
    window.location.href = str
}
// 状态部分
// 保存问卷
saveBtn.onclick = function(){     
    put("未发布")
}
// 发布问卷
publicBtn.onclick = function(){   
    cover.style.display = "block"; 
    // 弹出框时间
    document.getElementById("timeId").textContent = dateBox.value
    // put("发布中")
}
// 关闭弹出窗口
close.addEventListener('click', () => { 
    cover.style.display = "none"; 
});
no.addEventListener('click', () => { 
    cover.style.display = "none"; 
});
// 点击确认
yes.addEventListener('click', () => { 
    put("发布中")
})
// 点编辑进来的编辑页面
function edit(editArr){
    titleText.value=editArr.title
    dateBox.value=editArr.time
    // 先建问题类型呈现在页面
    if(editArr.questions){
        for(let j=0;j<editArr.questions.length;j++){
            // console.log(j);
            // 保证按原先顺序
            if(editArr.questions[j].type==="单选题"){
                singlefun()
                subject[j] = subject[j].replace("单选题目",editArr.questions[j].questionTitle)
                const checkboxs = document.getElementsByClassName("contents")[j].getElementsByClassName("subjectChose")
                for(let z=0;z<checkboxs.length;z++){
                    subject[j] = subject[j].replace("选项"+(z+1),editArr.questions[j].options[z])
                }
            }
            if(editArr.questions[j].type==="多选题"){
                mutiplefun()
                subject[j] = subject[j].replace("多选题目",editArr.questions[j].questionTitle)
                const checkboxs = document.getElementsByClassName("contents")[j].getElementsByClassName("subjectChose")
                for(let z=0;z<checkboxs.length;z++){
                    subject[j] = subject[j].replace("选项"+(z+1),editArr.questions[j].options[z])
                }
            }
            if(editArr.questions[j].type==="文本题"){
                textfun()
                subject[j] = subject[j].replace("文本题目",editArr.questions[j].questionTitle)
                subject[j] = subject[j].replace("请输入题目说明",editArr.questions[j].text)
                if(editArr.questions[j].check){
                    console.log(j);
                    // subject[j] = subject[j].replace(">&nbsp;","checked>&nbsp;")
                }
            }
            play()          
        }
    }   
}

// 填写问卷
let writeId = localStorage.getItem("write-id")
for(let q=0;q<Arr.length;q++){
    // 隐藏填写问卷中不需要显示的内容
    if(Arr[q].id===writeId){
        editArr=Arr[q];
        // 隐藏上移等操作
        edit(editArr);
        for(let i=0;i<opers.length;i++){
            opers[i].style.display="none"
        }
        // 隐藏必须填写
        for(let i=0;i<musts.length;i++){
            musts[i].style.display="none"
        }
        // 隐藏条件问题 和保存发布按钮
        wrapper[0].style.display="none"
        saveBtn.style.display="none"
        publicBtn.style.display="none"
        // 显示提交按钮
        submit[0].style.display="block"
        // 将标题 题目 选项 截止日期等设置为不可修改
        titleText.readOnly=true
        const subTitle = document.getElementsByClassName("subjectTitle")
        for(let i=0;i<subTitle.length;i++){
            subTitle[i].readOnly=true
            const subChose = subTitle[i].parentNode.parentNode.getElementsByClassName("subjectChose")
            for(let i=0;i<subChose.length;i++){
                subChose[i].readOnly=true
            }
            // subTitle[i].parentNode.parentNode.getElementsByClassName("date")[0].readOnly=true
        }

        submit[0].onclick = function(){
            let flag = 0;
            for(let q=0;q<Arr.length;q++){
                if(Arr[q].id===writeId){
                    // 保存答题数据
                    const writeContents = document.getElementsByClassName("contents");
                    // console.log(writeContents);
                    // 第j道题
                    for(let j=0;j<writeContents.length;j++){
                        /* 必答题不能为空 */
                        if(Arr[q].questions[j].check===true&&document.getElementsByClassName("contents")[j].getElementsByClassName("text")[0].value.length===0){
                            alert("必答题不能为空");
                             return
                        }
                        // 存答案
                        // 单选题
                        if(writeContents[j].getElementsByClassName("demoHidden").length>0){
                            const radios = writeContents[j].getElementsByClassName("demoHidden");
                            // 第z个选项
                            for(let z=0;z<radios.length;z++){
                                if(radios[z].checked){
                                    console.log(j);
                                    console.log(z);
                                    Arr[q].questions[j].answer[z]++
                                }
                            }
                        }else if(writeContents[j].getElementsByClassName("democheckbox").length>0){
                            const checkboxs = writeContents[j].getElementsByClassName("democheckbox");
                            // 第z个选项
                            for(let z=0;z<checkboxs.length;z++){
                                if(checkboxs[z].checked){
                                    console.log(j);
                                    console.log(z);
                                    Arr[q].questions[j].answer[z]++
                                }
                            }
                        }else{
                        // 文本题
                        // if(document.getElementsByClassName("contents")[j].getElementsByClassName("text")[0].value.length){   
                            Arr[q].questions[j].answertext++   
                        }
                    }
                    
                    console.log(Arr[q]);
                }
                
            ArrText=JSON.stringify(Arr)
            localStorage.setItem("ArrText",ArrText)
            localStorage.removeItem("write-id")
            str="../index.html"
            window.location.href = str
        }
        
    }
}
}





